<template>
  <div class="main-sidebar-height" style="padding-bottom: 24px; background-color: #fff">
    <PageHeader @back="backHandler()" subTitle="返回">
      {{ title }}
    </PageHeader>

    <div v-if="dataDetail2 === null || dataDetail2.length === 0">
      <a-spin :spinning="uploading">
        <div class="ant-upload-select-text-box" style="padding-top: 24px">
          <a-upload
            name="file"
            :multiple="false"
            accept=".xls, .xlsx, .xlsm"
            :show-upload-list="false"
            :action="action"
            :custom-request="beforeUpload1"
          >
            <img :src="uploadImg" style="width: 139px; height: 106px" />
            <div class="ant-modal-body">
              <div style="font-size: 12px; color: #666">点击添加文件或将文件拖拽到此处</div>
              <div style="font-size: 12px; color: #999">(文件大小不超过5M)</div>
            </div>
          </a-upload>
        </div>
      </a-spin>
      <div class="tipBox">
        <a-row style="color: #252525; font-size: 16px; font-weight: 500"> 温馨提示： </a-row>
        <a-row>
          <a-col :span="12" style="line-height: 25px; color: #999">
            <div style="margin-top: 6px">
              请先下载模板，根据模板填写信息后再进行上传<a-button
                size="small"
                type="link"
                @click="download"
                class="primary_color"
                style="font-size: 12px"
                >下载标准模板</a-button
              >
            </div>
            <div>1.该功能用于进行{{ title }}操作，{{ title }}仅创建增减员计划</div>
            <div>2.模板文件大小不得超过5M，单次导入上传数据不得超过1000条</div>
            <div>3.支持wps，excel2003以上版本文件，支持xlsx格式</div>
            <div>4.请不要上传加密或带宏的文件，不然将导致上传错误</div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div v-else style="display: flex; padding-top: 15px; padding-left: 24px; padding-right: 24px; flex-direction: column; width: 100%">
      <div>
        <div
          style="
            padding-left: 10px;
            display: flex;
            flex-flow: row;
            align-items: center;
            height: 35px;
            width: 100%;
            background-color: #fffbe6;
            border-style: solid;
            border-color: #ffe58f;
            border-width: 1px;
            border-radius: 5px;
          "
        >
          <img style="width: 16px; height: 16px; margin-right: 5px" src="../../../assets/icons/重复.png" />
          <span sytle="color:#55565D;font-size:14px;">
            共{{ allCount }}条数据，成功导入{{ successCount }}条数据， <label class="redc">{{ errorCount }}</label
            >条数据导入失败
          </span>
        </div>
      </div>
      <div class="header-title-box">
        <div class="headerTitle">
          <div class="block" />
          <div style="font-size: 15px; font-weight: 700; font-color: #252525">错误信息</div>
        </div>
        <div class="btn-box">
          <a-button class="fr" type="primary" @click="BatchGet" :disabled="uploading">{{
            uploading ? "数据导出中..." : "导出错误数据"
          }}</a-button>
        </div>
      </div>
      <a-table :columns="columnDialogDetailguding" :data-source="dataDetail2" :scroll="{ x: 800 }" row-key="id">
        <div v-for="item in columnDialogDetailguding" :slot="item.key" slot-scope="text, record" :key="item.key">
          <template>
            <div v-if="!getErro(record.errorInfo, item.key)">
              {{ text }}
            </div>
            <a-tooltip v-else placement="top">
              <template slot="title">
                <span>{{ getErroInfo(record.errorInfo, item.key) }}</span>
              </template>
              <div style="color: #ff0000">{{ text }}</div>
            </a-tooltip>
          </template>
        </div>
      </a-table>
    </div>
    <a-modal v-model="dialogFailVisible" :title="title" width="500px" @ok="handleCancel">
      <template slot="footer">
        <a-button @click="handleCancel"> 取消 </a-button>
        <a-button key="submit" type="primary" @click="handleLizhi">查看增减员计划</a-button>
      </template>
      <div style="padding-left: 10px; display: flex; flex-flow: row; align-items: center; height: 35px; width: 100%">
        <img style="width: 25px; height: 25px; margin-right: 10px" src="../../../assets/icons/duihao.png" />
        <div style="color: #3c3d43; font-size: 15px; font-weight: 700">共{{ allCount }}条数据，全部导入成功！</div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import UploadMixin from "xqjr-plugin-common/UploadOrExport/uploadMixin";
import { getToken } from "xqjr-module-auth";
const mixin = new UploadMixin();
const columnDialogDetailguding = [
  {
    title: "错误信息",
    dataIndex: "errorInfo",
    key: "errorInfo",
    scopedSlots: { customRender: "errorInfo" },
    align: "center",
    width: 160,
    ellipsis: true,
    fixed: "left"
  },
  {
    title: "姓名",
    dataIndex: "empName",
    scopedSlots: { customRender: "empName" },
    align: "center",
    ellipsis: true,
    key: "empName",
    width: 140
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    scopedSlots: { customRender: "idCard" },
    align: "center",
    ellipsis: true,
    key: "idCard",
    width: 200
  },
  {
    title: "离职原因",
    dataIndex: "leaveOfficeReason",
    scopedSlots: { customRender: "leaveOfficeReason" },
    align: "center",
    ellipsis: true,
    key: "leaveOfficeReason",
    width: 170
  },
  {
    title: "离职日期",
    dataIndex: "leaveOfficeDate",
    scopedSlots: { customRender: "leaveOfficeDate" },
    align: "center",
    ellipsis: true,
    key: "leaveOfficeDate",
    width: 140
  },
  {
    title: "离职备注",
    dataIndex: "remark",
    scopedSlots: { customRender: "remark" },
    align: "center",
    ellipsis: true,
    key: "remark",
    width: 170
  },
  {
    title: "是否社保减员",
    dataIndex: "whetherSocDecrease",
    scopedSlots: { customRender: "whetherSocDecrease" },
    align: "center",
    ellipsis: true,
    key: "whetherSocDecrease",
    width: 130
  },
  {
    title: "社保减员年月",
    dataIndex: "stopSocDate",
    scopedSlots: { customRender: "stopSocDate" },
    align: "center",
    ellipsis: true,
    key: "stopSocDate",
    width: 140
  },
  {
    title: "是否医保减员",
    dataIndex: "whetherMeDecrease",
    scopedSlots: { customRender: "whetherMeDecrease" },
    align: "center",
    ellipsis: true,
    key: "whetherMeDecrease",
    width: 130
  },
  {
    title: "医保减员年月",
    dataIndex: "stopMeDate",
    scopedSlots: { customRender: "stopMeDate" },
    align: "center",
    ellipsis: true,
    key: "stopMeDate",
    width: 140
  },
  {
    title: "是否公积金减员",
    dataIndex: "whetherSealed",
    scopedSlots: { customRender: "whetherSealed" },
    align: "center",
    ellipsis: true,
    key: "whetherSealed",
    width: 130
  },
  {
    title: "公积金减员年月",
    dataIndex: "sealedDate",
    ellipsis: true,
    scopedSlots: { customRender: "sealedDate" },
    align: "center",
    key: "sealedDate",
    width: 140
  },
  {
    title: "服务费",
    dataIndex: "serviceCost",
    ellipsis: true,
    scopedSlots: { customRender: "serviceCost" },
    align: "center",
    key: "serviceCost",
    width: 140
  }
];
import axios from "axios";
import qs from "qs";
export default {
  mixins: [mixin],
  data() {
    return {
      uploading: false,
      allCount: 0,
      errorCount: 0,
      successCount: 0,
      columnDialogDetailguding,
      uploadImg: require("@/assets/img/uploadImg.png"),
      action: "",
      socFile: undefined,
      dialogFailVisible: false,
      dataDetail2: [],
      title: "",
      erroData: undefined
    };
  },

  created() {
    console.log(this.$route);
    this.title = this.$route.query.title;
    this.dataDetail2 = [];
  },
  methods: {
    backHandler() {
      if (this.dataDetail2 && this.dataDetail2.length > 0) {
        this.dataDetail2 = [];
        this.columnDialogDetailguding = [];
        this.allCount = 0;
        this.errorCount = 0;
        this.successCount = 0;
        this.erroData = {};
      } else {
        this.goback();
      }
    },
    getLog(item) {
      console.log(item.key);
    },
    handleLizhi() {
      this.dialogFailVisible = false;
      this.$router.go(-1);
    },
    handleCancel() {
      this.dialogFailVisible = false;
    },
    ExportHandle() {
      this.handleImportChange();
    },
    getRed(key, record) {
      if (record !== undefined && record.errorColumn !== null) {
        for (var i = 0; i < record.errorColumn.length; i++) {
          if (record.errorColumn[i] === key) {
            return true;
          }
        }
      }
      return false;
    },
    BatchGet() {
      this.uploading = true;
      var url = "/hr/api/v1/empSocPlans/exportIncreaseErrorList";
      var data = {};
      if (this.title === "批量增员") {
        url = "/hr/api/v1/empSocPlans/exportIncreaseErrorList";
        data = this.erroData;
      } else if (this.title === "批量减员") {
        url = "/hr/api/v1/empSocPlans/exportDecreaseErrorList";
        data = this.erroData;
      }

      axios({
        url,
        data,
        method: "post",
        responseType: "blob",
        headers: {
          token: this.$store.state.auth.token,
          "Content-Type": "application/json"
        }
      })
        .then((res) => {
          this.uploading = false;
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", `${this.$store.state.hr.companyName}_` + this.title + "错误数据" + ".xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    handleImportChange() {
      this.uploading = true;
      var url = "/hr/api/v1/empSocPlans/importIncrease";
      if (this.title === "批量增员") {
        url = "/hr/api/v1/empSocPlans/importIncrease";
      } else if (this.title === "批量减员") {
        url = "/hr/api/v1/empSocPlans/importDecrease";
      }

      const tdata = new FormData();
      tdata.append("companyId", this.$store.state.hr.companyId);
      tdata.append("file", this.socFile);

      this.$request({
        url,
        method: "post",
        data: tdata
      })
        .then((res) => {
          this.uploading = false;

          if (res.data) {
            this.erroData = JSON.parse(JSON.stringify(res.data));
            if (this.title === "批量增员") {
              this.allCount = res.data.allCount;
              this.errorCount = res.data.errorCount;
              this.successCount = res.data.successCount;
              if (res.data.headList) {
                this.columnDialogDetailguding = [];
                res.data.headList.map((item) => {
                  var v = {
                    title: item,
                    dataIndex: item,
                    key: item,
                    scopedSlots: { customRender: item },
                    align: "center",
                    width: 160,
                    ellipsis: true
                  };
                  if (v.title === "姓名") {
                    v.fixed = "left";
                  }
                  this.columnDialogDetailguding.push(v);
                });
              }

              if (res.data.errorList) {
                this.dataDetail2 = [];
                res.data.errorList.map((item) => {
                  var r = item.excelDate;
                  if (item.errorInfo) {
                    r.errorInfo = item.errorInfo;
                  }

                  this.dataDetail2.push(r);
                });
              }
              if (this.dataDetail2 == null || this.dataDetail2.length === 0) {
                this.dialogFailVisible = true;
              }
            } else if (this.title === "批量减员") {
              this.allCount = res.data.allCount;
              this.errorCount = res.data.errorCount;
              this.successCount = res.data.successCount;

              res.data.headList = [
                { key: "name", value: "姓名" },
                { key: "idCard", value: "证件号码" },
                { key: "whetherSocDecrease", value: "是否社保减员" },
                { key: "stopSocDate", value: "社保减员年月" },
                { key: "whetherMeDecrease", value: "是否医保减员" },
                { key: "stopMeDate", value: "医保减员年月" },
                { key: "whetherSealed", value: "是否公积金减员" },
                { key: "sealedDate", value: "公积金减员年月" },
                { key: "serviceCost", value: "服务费" }
              ];
              if (res.data.headList) {
                this.columnDialogDetailguding = [];
                res.data.headList.map((item) => {
                  var v = {
                    title: item.value,
                    dataIndex: item.key,
                    key: item.key,
                    scopedSlots: { customRender: item.key },
                    align: "center",
                    width: 160,
                    ellipsis: true
                  };
                  if (v.key === "name") {
                    v.fixed = "left";
                  }
                  this.columnDialogDetailguding.push(v);
                });
              }

              if (res.data.errorList) {
                res.data.errorList.map((item) => {
                  if (item.whetherMeDecrease) {
                    item.whetherMeDecrease = "是";
                  } else {
                    item.whetherMeDecrease = "否";
                  }
                  if (item.whetherSealed) {
                    item.whetherSealed = "是";
                  } else {
                    item.whetherSealed = "否";
                  }

                  if (item.whetherSocDecrease) {
                    item.whetherSocDecrease = "是";
                  } else {
                    item.whetherSocDecrease = "否";
                  }
                });
                this.dataDetail2 = res.data.errorList;
              }
              if (this.dataDetail2 == null || this.dataDetail2.length === 0) {
                this.dialogFailVisible = true;
              }
            }
          }
        })
        .catch((err) => {
          this.uploading = false;
          console.log("debug log --> ", err);
        });
    },
    getErro(item, tkey) {
      var v = false;
      for (var key in item) {
        if (key === tkey) {
          v = true;
        }
      }
      return v;
    },
    getErroInfo(item, tkey) {
      for (var key in item) {
        if (key === tkey) {
          return item[key];
        }
      }
    },
    beforeUpload1({ file }) {
      this.socFile = file;
      if (this.socFile) {
        // this.isDaoru = true;
        this.handleImportChange();
      }
    },

    // 下载模板
    download() {
      const token = this.$store.state.auth.token;
      let params = {};

      if (this.title === "批量增员") {
        params = {
          templateName: "importIncreaseTemplate.xlsx"
        };
      } else if (this.title === "批量减员") {
        params = {
          templateName: "importDecreaseTemplate.xlsx"
        };
      }
      axios({
        url: ` /hr/api/v1/excel/template/download`,
        params,
        paramsSerializer: (param) => {
          return qs.stringify(param, { indices: false });
        },
        method: "get",
        responseType: "blob",
        headers: {
          token: token
        }
      })
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "multipart/form-data"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", this.title + "模板.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },

    handleUploadError() {
      this.$message.warning("没有文件");
    }
  }
};
</script>
<style lang="scss" scoped>
.main-sidebar-height {
  min-height: calc(100vh);
}
.header-title-box {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerTitle {
    display: flex;
    justify-content: flex-start;
    .block {
      width: 3px;
      height: 20px;
      margin-top: 2px;
      background-color: var(--primary);
      margin-right: 12px;
    }
  }
}
.tipBox {
  line-height: 18px;
  background: #faf9f9;
  border-radius: 4px;
  font-size: 12px;
  color: #595959;
  margin: 0 24px;
  padding: 12px;
  height: 200px;
}
.ant-upload-select-text-box {
  border: 1px dashed #b8b8b8;
  background: #fff;
  margin: 24px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 12px;
}
.ant-upload-select-text-box ::v-deep .ant-upload-list {
  display: none;
}

.ant-modal-body {
  line-height: 24px;

  em {
    color: var(--primary);
    font-style: normal;
  }
}
.redc {
  color: red;
}
</style>
